<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '关注公众号',
  },
}
</route>

<template>
  <view 
    :class="[themeConfig.theme === 'dark' ? 'follow-dark-bg' : '', 'follow-container']" 
  >
    <image class="bg-follow" mode="widthFix" :src="icons.bg_follow"></image>
    <view class="bg-qrcode-wrap">
      <image class="bg-qrcode" mode="widthFix" :src="gzhFlag ? icons.bg_qrcode2 : icons.bg_qrcode"></image>
      <image class="qrcode" v-if="!gzhFlag" :src="icons.gzh_qrcode" show-menu-by-longpress></image>
      <image class="hand-img" v-if="!gzhFlag" mode="widthFix" :src="icons.hand"></image>
      <view class="w-450rpx z-10 relative m-a !mt--10rpx" v-if="gzhFlag">
        <wd-button custom-class="share-btn" open-type="share">分享</wd-button>
        <image class="w-full" mode="widthFix" :src="icons.share_btn"></image>
      </view>
    </view>
  </view>
</template>
  
<script lang="ts" setup>
import { share } from "@/enum";
import { useThemeStore, useUserStore } from "@/store";
import { icons } from "@/utils/icons";
import { useMessage } from "wot-design-uni";

// 主题颜色
const { themeConfig } = useThemeStore();
const user = useUserStore();
const message = useMessage();

// 获取分享链接
const getUrl = () => {
  const id = user.userInfo.id || '';
  return "https://h5.fytxcq.cn/#/pages/tabbar/index?instrId=" + id;
}

// 是否关注公众号
const gzhFlag = computed(() => {
  return user.userInfo.gzhFlag;
})

// 分享链接
const shareUrl = () => {
  const url = getUrl();
  uni.setClipboardData({
    data: url,
    success: () => {
      // message.show('链接已复制到剪切板!')
    },
    fail: (err) => {
      console.error('复制失败', err);
    }
});
}

onShow(() => {
  user.userInfo.id && user.getUserInfo();
  nextTick(() => {
    // 设置页面标题
    themeConfig.title = '关注公众号';
  })
})

onShareAppMessage(() => {
  const { id = '', userProfileInfoVo } = user.userInfo || {};
  const { partnerRequirements, personalImageryInfoVoList = [] } = userProfileInfoVo || {};
  const firstItem = personalImageryInfoVoList[0] || { fileInfoVo: { preUrl: '' } };
  const _fileInfoVo = firstItem.fileInfoVo || { preUrl: '' };

  const params = {
    instrId: id || '',
    source: gzhFlag.value ? 'gzh' : '',
  }
  let paramsStr = '';
  for (const key in params) {
    paramsStr += `${key}=${params[key]}&`
  }

  const sharePath = `/pages/tabbar/index?${paramsStr}`;
  console.log('sharePath: ', sharePath);
  return {
    title: '我满心期待，与你相遇的未来！',
    path: sharePath,
    imageUrl: share
  }
})
</script>

<script lang="ts">
export default {
  // 微信小程序开启样式穿透
  options: { styleIsolation: "shared" },
};
</script>

<style lang="scss" scoped>
.follow-container {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  width: 100vw;
  height: 100%;

  .events-com {
    position: absolute;
    pointer-events: none;
    width: 100%;
  }

  .bg-follow {
    @extend .events-com;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 0);
  }

  .bg-qrcode-wrap {
    font-size: 0;
    position: relative;
    width: 750rpx;

    .bg-qrcode {
      @extend .events-com;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }

    .hand-img {
      position: absolute;
      right: 0;
      top: calc(50% + 220rpx);
      transform: translateY(-50%);
      pointer-events: none;
      width: 300rpx;
    }

    .qrcode {
      position: absolute;
      left: 50%;
      top: calc(50% + 56rpx);
      transform: translate(-50%, -50%);
      width: 300rpx;
      height: 300rpx;
    }
  }
}
</style>
  